<template>
  <view style="padding: 10px 20px">
    <view style="text-align: center">
      <view style="font-size: 38upx">独角兽企业榜单</view>
    </view>
    <u-line></u-line>
    <view
      style="
        margin-top: 20upx;
        font-size: 26upx;
        color: #666;
        margin-bottom: 20upx;
      "
    >
      企业简介企业简介企业简介
    </view>
    <view style="margin: 20upx 0px">
      <view class="flex" style="font-size: 26upx">
        <label style="font-size: 24upx; margin-right: 10upx">企业分类:</label>
        <u-checkbox-group v-model="checkboxValue1" placement="row">
          <u-checkbox
            :customStyle="{ marginBottom: '8px', marginRight: '10px' }"
            labelSize="12"
            iconSize="10"
            v-for="(item, index) in checkboxList1"
            :key="index"
            :label="item.name"
            :name="item.name"
          >
          </u-checkbox>
        </u-checkbox-group>
      </view>
      <view class="flex" style="font-size: 26upx; margin-bottom: 8px">
        <picker
          mode="selector"
          :value="index"
          :range="country_area"
          @change="onPickerChange"
        >
          <view class="picker"> 区域分类:{{ selectedOption }} </view>
        </picker>
      </view>
      <view class="flex" style="font-size: 26upx">
        <label style="font-size: 24upx; margin-right: 10upx">赛道分类:</label>
        <picker :value="index" :range="array">
          <view class="uni-input">{{ array[index] }}</view>
        </picker>
      </view>
    </view>
    <uTabs :baseList="tabBasicList" />

    <view style="margin-top: 20upx">
      <mainList :baseList="topCompanyBasicList" type="highList" />
    </view>
  </view>
</template>
<!-- url="/pages/hignList/details" -->
<script>
import mainList from "@/components/mainList/index.vue";
import uTabs from "@/components/uTabs/index.vue";
export default {
  components: {
    mainList,
    uTabs,
  },
  data() {
    return {
      array: ["中国", "美国", "巴西", "日本"],
      index: 0,
      country_area: [],
      country_id: undefined,
      selectedOption: "中国",
      tabBasicList: [
        {
          name: "2024",
        },
        {
          name: "2023",
        },
        {
          name: "2022",
        },
        {
          name: "其他",
        },
      ],
      checkboxValue1: [],
      // 基本案列数据
      checkboxList1: [
        {
          name: "独角兽",
          disabled: false,
        },
        {
          name: "隐形独角兽",
          disabled: false,
        },
        {
          name: "其他",
          disabled: false,
        },
      ],
      topCompanyBasicList: [
        {
          id: 0,
          title: "2024年度全球独角兽企业500强大会",
          desc: "企业简介企业简介企业简介",
          tag: "企业标签",
          slot: "",
        },
        {
          id: 1,
          title: "2024年度全球独角兽企业500强大会",
          desc: "企业简介企业简介企业简介",
          tag: "企业标签",
          slot: "",
        },
        {
          id: 2,
          title: "2024年度全球独角兽企业500强大会",
          desc: "企业简介企业简介企业简介",
          tag: "企业标签",
          slot: "",
        },
      ],
      CompanyData: {},
    };
  },
  onLoad() {
    const country_area = uni.getStorageSync("country_area");
    this.country_area = country_area.map((option) => option.name);
  },
  onShow() {
    this.getCompanyData();
    this.fetchData();
  },
  methods: {
    fetchData() {
      uni.request({
        url: "http://data.unicorn500.com/ecmsapi/index.php?mod=bangdan&act=bdlist&page=1&limit=30&searchbdid=82&searchcontrast=0&searchtitle=&searchnationid=0&searchproid=&searchcityid=&searchtypeid=0&searchsubtypeid=&searchorderby=1&type=list", // 替换为您的 API 地址
        method: "GET",
        success: (res) => {
          if (res.statusCode === 200) {
            console.log(res.data.data);
            this.topCompanyBasicList = res.data.data?.map((item, index) => {
              console.log(index);
              
              return {
                ...item,
                img_url: item.icon_url,
                name: item.simplename,
                desc_text: "赛道：" + item.typename,
                real_name: "总估值: " + item.guzhi + "亿元",
                xuhao: index + 1,
                msg: "",
              };
            });
            console.log(this.topCompanyBasicList);
            
          } else {
            console.error("请求失败:", res);
          }
        },
        fail: (err) => {
          console.error("请求错误:", err);
        },
        complete: () => {
          this.loading = false; // 请求完成，更新加载状态
        },
      });
    },
    onPickerChange(e) {
      const index = e.detail.value;
      const country_area = uni.getStorageSync("country_area");
      this.selectedOption = this.country_area[index];
      this.country_id = country_area[index]?.id;
      this.getList();
    },
    async getCompanyData() {
      const res = await this.$api.getCompany({});

      this.CompanyData = res;
    },
  },
};
</script>

<style></style>